<script>
import {mapState,mapMutations,mapGetters} from "vuex";
export default {
    name: "App",
    computed:{
        ...mapState(["liuXiaoLe","shenXiaoXu","renYiHao","geBinJie"]),
        // ...mapGetters(["sum"]),
        ...mapGetters({
            sum2:"sum"
        }),
        sum(){
            return this.$store.state.liuXiaoLe+this.shenXiaoXu+this.renYiHao+this.geBinJie
        }
    },
    // 混用
    methods:{
        ...mapMutations(["SET_REN_YI_HAO"]),
        ...mapMutations({
            setShenXiaoXu:"SET_SHEN_XIAO_XU"
        })
    }
}
</script>

<template>
    <div>
        <h3>总票数：{{liuXiaoLe+shenXiaoXu+renYiHao+geBinJie}}</h3>
        <h3>总票数：{{sum}}</h3>
        <h3>总票数：{{$store.getters.sum}}</h3>
        <h3>总票数：{{sum2}}</h3>
        <hr/>
            <!--    不建议直接修改数据状态，要将所有的操作行为进行集中式管理，修改数据状态交给mutaion    -->
<!--        <button @click="$store.state.liuXiaoLe++">刘小乐：{{$store.state.liuXiaoLe}}|{{liuXiaoLe}}</button>-->
        <button @click="$store.commit('SET_LIU_XIAO_LE',1)">刘小乐：{{$store.state.liuXiaoLe}}|{{liuXiaoLe}}</button>
        <button @click="$store.commit('SET_GE_BIN_JIE')">戈斌杰：{{$store.state.geBinJie}}|{{geBinJie}}</button>
        <button @click="SET_REN_YI_HAO(3)">任逸豪：{{$store.state.renYiHao}}|{{renYiHao}}</button>
        <button @click="setShenXiaoXu(100)">沈晓旭：{{$store.state.shenXiaoXu}}|{{shenXiaoXu}}</button>
    </div>
</template>

<style scoped>
button{
    padding:5px;
    margin:5px;
}
</style>